<template>
    <div :class="[
            'cvu-tooltip', 
            `cvu-tooltip-${theme}`, 
            { 
                'cvu-tooltip-disarrow': disArrow,
                'cvu-tooltip-nomax-width': !maxWidth
            }
        ]"
    >
        <Tooltip 
            :content="content"
            :theme="theme"
            :placement="placement"
            :disabled="disabled"
            :delay="delay"
            :always="always"
            :maxWidth="maxWidth"
            :offset="offset"
            :transfer="transfer"
            :transferClassName="transferClassName"
            :eventsEnabled="eventsEnabled"
            :style="{width: `${width}px`}"
            @on-popper-show="handleShow"
            @on-popper-hide="handleHide"
        >
            <slot v-if="$slots.default" />
            <div v-if="$slots.content" slot="content">
                <slot name="content" />
            </div>
        </Tooltip>
    </div>
</template>

<script>
import common from '../../../until/common'
export default {
    name: 'cvu-tooltip',
    props: {
        // 提示的内容
        content: {
            type: String,
            default: ''
        },
        // 原始文字内容宽度
        width: [String, Number],
        // 主题,可选值为 dark 或 light
        theme: String,
        // 提示框出现的位置
        placement: {
            validator (value) {
                return common.oneOf(value, [
                    'top', 
                    'top-start', 
                    'top-end', 
                    'bottom', 
                    'bottom-start', 
                    'bottom-end', 
                    'left', 
                    'left-start', 
                    'left-end', 
                    'right', 
                    'right-start', 
                    'right-end'
                ]);
            },
            default: 'bottom'
        },
        // 是否禁用提示框
        disabled: {
            type: Boolean,
            default: false
        },
        // 延迟显示，单位毫秒
        delay: {
            type: Number,
            default: 0
        },
        // 是否总是可见
        always: {
            type: Boolean,
            default: false
        },
        // 最大宽度，超出最大值后，文本将自动换行，并两端对齐
        maxWidth: [String, Number],
        // 出现位置的偏移量
        offset: {
            type: Number,
            default: 0
        },
        // 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
        transfer: {
            type: Boolean,
            default: false
        },
        // 开启 transfer 时，给浮层添加额外的 class 名称
        transferClassName: {
            type: String,
            default: ''
        },
        // 是否开启 Popper 的 eventsEnabled 属性，开启可能会牺牲一定的性能
        eventsEnabled: {
            type: Boolean,
            default: false
        },
        // 是否隐藏小三角
        disArrow: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        // 在提示框显示时触发
        handleShow() {
            this.$emit('on-popper-show')
        },
        // 在提示框消失时触发
        handleHide() {
            this.$emit('on-popper-hide')
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../style/_index.scss';
    .cvu-tooltip{
        display: inline-block;
        width: auto;
        /deep/.ivu-tooltip{
            .ivu-tooltip-rel, .ivu-tooltip-rel *{
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        &.cvu-tooltip-nomax-width{
            /deep/.ivu-tooltip{
                .ivu-tooltip-popper{
                    .ivu-tooltip-inner{
                        max-width: none;
                        white-space: nowrap;
                    }
                }
            }
        }
        &.cvu-tooltip-disarrow{
            /deep/.ivu-tooltip{
                .ivu-tooltip-popper{
                    .ivu-tooltip-arrow{
                        display: none;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
</style>